<style>
  .el-table label {
    text-align: center;
  }
</style>
<template>
  <div class="app-container">
    <el-button type="primary" @click="handleAdd">添加企业邮箱</el-button>
    <el-table
      :data="issueEmailList"
      style="width: 100%">
      <el-table-column
        prop="userName"
        label="邮箱账号">
      </el-table-column>
      <el-table-column
        prop="mailServerHost"
        label="邮箱服务器host"
      >
      </el-table-column>
      <el-table-column
        prop="userName"
        label="发件人"
      >
      </el-table-column>
      <el-table-column
        prop="uname"
        label="创建人">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="getIssue(scope.row.id)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="deleteOne(scope.row.id)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible" width="60%">
      <el-form ref="form" :model="form" :rules="formRules">
        <el-input type="hidden" v-model="form.id"></el-input>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="邮箱账号" prop="userName" label-width="200px">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="邮箱密钥" prop="password" label-width="200px">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="邮箱服务器host" prop="mailServerHost" label-width="200px">
              <el-input v-model="form.mailServerHost"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="邮箱服务器端口" prop="mailServerPort" label-width="200px">
              <el-input v-model="form.mailServerPort"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="邮件发送者地址" prop="fromAddress" label-width="200px">
              <el-input v-model="form.fromAddress"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addIssueMail">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
  import {selectList, addIssueEmail, updateIssueEmail, deleteIssueEmail , selectById} from "@/api/system/issueEmail";
  import {delResume} from "@/api/system/resume";

  export default {
    name: 'issueEmail',
    data() {
      return {
        issueEmailList: [],
        form: {
          id: 0,
          userName: null,
          password: null,
          fromAddress: null,
          mailServerHost: null,
          mailServerPort: null
        },
        dialogFormVisible: false,
        formRules: {
          userName: [
            {required: true, message: '邮箱账号不能为空', trigger: 'blur'},
            {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
          ],
          password: [
            {required: true, message: '邮箱密钥不能为空', trigger: 'blur'}
          ],
          fromAddress: [
            {required: true, message: '邮件发送者地址不能为空', trigger: 'blur'}
          ],
          mailServerHost: [
            {required: true, message: '邮箱服务器host不能为空', trigger: 'blur'}
          ],
          mailServerPort: [
            {required: true, message: '邮箱服务器端口不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        selectList().then(res => {
          console.log(res)
          this.issueEmailList = res.data
        })
      },
      handleAdd() {
        this.form = {}
        this.dialogFormVisible = true;
      },
      getIssue(id){
        selectById(id).then(res =>{
          this.form = res.data
          this.dialogFormVisible = true;
        })
      },
      addIssueMail() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateIssueEmail(this.form).then(res => {
                this.$modal.msgSuccess("修改成功");
                this.form = {}
                this.dialogFormVisible = false
                this.getList();
              })
            } else {
              addIssueEmail(this.form).then(res => {
                this.$modal.msgSuccess("新增成功");
                this.form = {}
                this.dialogFormVisible = false
                this.getList();
              })
            }
          }
        })
      },
      deleteOne(id){
        this.$modal.confirm('是否确认删除这条的数据项？').then(function () {
          return deleteIssueEmail(id);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {

        });
      }
    }
  }
</script>
